import React, { useMemo } from 'react';
import { View } from '@tarojs/components';
import { toValidScalePX } from '@/utils';
import './index.scss';

const ModuleText = ({ componentCfg = {} }) => {
  const { styleSettingRender: styleRender, content } = componentCfg;
  const wrapStyles = useMemo(() => {
    return {
      paddingTop: styleRender.paddingTop,
      paddingBottom: styleRender.paddingBottom,
      background: styleRender.backgroundColor,
    };
  }, [styleRender]);
  const titleStyles = useMemo(() => {
    return {
      fontSize: toValidScalePX(styleRender.fontSize),
      color: styleRender.color,
      textAlign: styleRender.textAlign,
      fontWeight: styleRender.fontWeight,
      fontStyle: styleRender.fontStyle,
      textDecoration: styleRender.textDecoration,
      lineHeight: styleRender.textDecoration,
    };
  }, [styleRender]);

  return (
    <View className="ModuleText" style={wrapStyles}>
      <View className="title" style={titleStyles}>
        {content.text}
      </View>
    </View>
  );
};
export default ModuleText;
